<template>
	<div class="sp-sticky" :class="isNav ? 'flex' : 'not-nav'">
		<div v-if="!isNav" class="sp-sticky_title">用Spaceship OS激活域名</div>
		<basic-dict
			v-if="(deviceType !== 3 && isNav) || !isNav"
			v-model="state.searchType"
			class="sp-sticky_radio"
			:color="isNav ? '#6f6e6f' : '#fff'"
			:options="[
				{ value: 1, label: '注册' },
				{ value: 2, label: '转移' }
			]"
		></basic-dict>

		<div class="sp-sticky_content">
			<a-input
				v-model="state.searchContent"
				type="text"
				class="content-ipt"
				:placeholder="state.searchType === 1 ? '搜索域名' : '输入你要转移的域名'"
			>
				<template #suffix>
					<div v-if="state.searchContent" class="inner-icon" @click="state.searchContent = ''"><icon-close /></div>
				</template>
			</a-input>
			<section v-if="state.searchType === 2" class="ml-2 flex-center gap-x-2">
				<a-button
					class="section-btn-text section-btn !w-fit !border-none"
					size="large"
					shape="round"
					@click.stop="handleBatchTransfer"
				>
					<icon-swap class="text-1.25rem mr-2" size="16" />
					<span v-if="deviceType === 1">批量转移</span>
				</a-button>
				<a-button
					type="primary"
					size="large"
					class="section-btn"
					:shape="deviceType === 1 ? 'round' : 'circle'"
					@click="emits('transfer')"
				>
					<div v-if="deviceType === 1">转移</div>
					<icon-swap v-else class="text-1.25rem" />
				</a-button>
			</section>
			<section v-else class="ml-4 flex-center gap-x-2">
				<a-button type="primary" long class="section-btn" :shape="deviceType === 1 ? 'round' : 'circle'" @click="emits('search')">
					<div v-if="deviceType === 1">搜索</div>
					<icon-search v-else class="text-1.25rem" />
				</a-button>
			</section>
			<div v-if="deviceType !== 3" class="content-modal" :class="{ open: visible }" @click.stop>
				<div class="modal-header">
					<div class="modal-header_title">一次转移多达500个域名</div>
					<a-button
						class="section-btn section-btn-text !w-fit !h-40px flex-center gap-x-2 mr-4 !border-none"
						:shape="deviceType === 1 ? 'round' : 'circle'"
						@click="emits('search')"
					>
						<icon-upload />
						上传csv
					</a-button>
					<icon-close class="modal-header_close" size="18" @click="handleClose" />
				</div>
				<div class="modal-body">
					<a-form ref="formEl" :model="state" layout="horizontal" class="h-full">
						<a-form-item field="transferContent" hide-label validate-trigger="change" :rules="rules" class="h-full">
							<a-input-tag
								v-model="state.transferContent"
								:style="{ width: '100%', height: '100%' }"
								:unique-value="true"
								class="custom-input-tag"
								placeholder="添加您的域名并通过按回车或空格键输入它们"
								:max-tag-count="500"
								size="large"
								allow-clear
								@press-enter="handleTransferChange"
							/>
						</a-form-item>
					</a-form>
				</div>
				<div class="modal-footer">
					<a-button
						v-show="state.transferContent.length > 1"
						type="text"
						size="large"
						class="font-700"
						shape="round"
						@click="() => (state.transferContent = [])"
						>全部清除</a-button
					>
					<a-button type="primary" size="large" class="section-btn" shape="round" :disabled="!state.transferContent.length"
						>转移</a-button
					>
				</div>
			</div>
			<basic-drawer
				v-else
				v-model:visible="visible"
				v-model:loading="loading"
				placement="bottom"
				height="100%"
				class="custom-drawer"
			>
				<template #header>
					<div class="w-full flex items-center justify-between">
						<div class="flex-1 text-1rem">一次转移多达500个域名</div>
						<icon-close size="18" @click="handleClose" />
					</div>
				</template>
				<a-form ref="formEl1" :model="state" layout="horizontal" class="h-full">
					<a-form-item field="transferContent" hide-label validate-trigger="change" :rules="rules" class="h-full">
						<a-input-tag
							v-model="state.transferContent"
							:style="{ width: '100%', height: '100%' }"
							:unique-value="true"
							class="custom-input-tag"
							placeholder="添加您的域名并通过按回车或空格键输入它们。"
							:max-tag-count="500"
							size="large"
							allow-clear
							@press-enter="handleTransferChange1"
						/>
						<div v-if="!state.transferContent.length" class="custom-input-placeholder">
							您也可以在每个域名后面用逗号添加任何Auth（EEP）代码。<br />
							示例 - mydomain.com,1234%6&*9
						</div>
					</a-form-item>
				</a-form>
				<template #footer>
					<section class="flex-center gap-x-2">
						<a-button type="text" class="font-700 section-btn" size="large" shape="round" @click="state.transferContent = []"
							>全部清除</a-button
						>
						<a-button type="primary" size="large" class="section-btn" shape="round">转移</a-button>
					</section>
				</template>
			</basic-drawer>
		</div>
	</div>
</template>
<script lang="ts" setup>
import type { FieldRule } from "@arco-design/web-vue/es/form";

interface IEmits {
	(event: "update:searchContent", value: string): void;
	(event: "update:transferContent", value: any): void;
	(event: "update:searchType", value: number): void;
	(event: "update:loading", value: boolean): void;
	(event: "search"): void;
	(event: "transfer"): void;
}
const emits = defineEmits<IEmits>();
interface IProps {
	searchContent: any;
	transferContent?: any;
	searchType?: any;
	isNav?: boolean;
}
const props = withDefaults(defineProps<IProps>(), {
	isNav: true,
	searchType: 1
});
const formEl = ref<any>();
const formEl1 = ref<any>();
const rules: FieldRule[] = [
	{
		type: "array",
		validator: (value: any, cb: any) => {
			let errors: string[] = [];
			value.forEach((val: string) => {
				if (!regexpMap.domain.test(val)) errors = ["请输入正确的域名"];
			});
			if (errors.length > 0) {
				cb(errors);
			} else {
				cb();
			}
		}
	}
];
const state = reactive({
	searchContent: useVModel(props, "searchContent", emits),
	transferContent: useVModel(props, "transferContent", emits),
	searchType: useVModel(props, "searchType", emits)
});

const handleTransferChange = () => {
	nextTick(() => {
		if (deviceType.value !== 3) formEl.value.validateField("transferContent");
	});
};
const handleTransferChange1 = () => {
	nextTick(() => {
		if (deviceType.value !== 3) formEl.value.validateField("transferContent");
		formEl1.value.validateField("transferContent");
	});
};
watch(
	() => state.transferContent,
	() => {
		nextTick(() => {
			if (deviceType.value !== 3) formEl.value.validateField("transferContent");
			formEl1.value.validateField("transferContent");
		});
	},
	{ deep: true }
);
const visible = ref(false);
const loading = ref(false);
const deviceType = computed(() => useAppStore().deviceType);
const handleClose = () => {
	visible.value = false;
};
const handleBatchTransfer = () => {
	visible.value = true;
};

onMounted(() => {
	document.addEventListener("click", function (e: any) {
		const target = e.target;
		const element = document.querySelector(".content-modal");
		// 检查点击事件是否发生在元素外部，并且target不是元素本身或其子元素
		if (!element) return;
		if (target !== element && !element.contains(target)) {
			visible.value = false;
		}
	});
});
</script>

<style lang="less">
.custom-input-tag {
	@apply !border-none;
	border-color: transparent;
	@apply !bg-transparent outline-none px-0;
	.arco-input-tag-mirror {
		width: 100% !important;
	}
	.arco-input-tag-inner {
		width: 100% !important;
		@apply flex-self-start flex flex-wrap;
		.arco-tag {
			@apply flex-shrink-0 w-fit  rounded-1rem flex-center;
		}
		.error-arco-tag {
			@apply text-[#ae0d00] bg-[#ffdad3];
		}
		.arco-input-tag-input {
			width: 100% !important;
			&::placeholder {
				font-size: 1rem;
			}
		}
	}
	.arco-input-tag-clear-btn {
		@apply hidden;
	}
}
.custom-input-placeholder {
	@apply absolute top-10 left-0 text-4;
	font-size: 1rem !important;
	line-height: 2rem;
}
.custom-drawer {
	.arco-form-item-wrapper-col {
		@apply h-full overflow-hidden;
		.arco-form-item-content-wrapper {
			@apply h-full;
			.arco-form-item-content {
				@apply h-full;
			}
		}
		.arco-form-item-message {
			@apply pt-4;
			font-size: unset;
		}
	}
}
</style>
<style lang="less" scoped>
.not-nav {
	@apply flex flex-col gap-y-6 !px-0;
}
.sp-sticky {
	@apply w-full flex-center px-5vw font-700 text-white;
	&_title {
		@apply mx-auto font-700 text-white mb-6;
	}
	&_radio {
		@apply mx-auto w-134px flex rounded-30px;
		background: rgba(43, 43, 45, 0.05);
		border: 1px solid transparent;
		.arco-radio-button {
			@apply flex-1 text-center text-[#6f6e6f];
		}
		.arco-radio-checked {
			@apply text-2;
		}
	}
	&_content {
		@apply relative z-99 bg-white w-full overflow-hidden flex-center p-2 pl-6 h-4rem  rounded-2rem;
		// border: 1px solid #ccc;
		.content-ipt {
			@apply border-none flex-1 rounded-28px pl-4;
			background-color: unset !important;
			height: 2.5rem;
			width: inherit;
			&:focus {
				outline: none;
			}
			:deep(.arco-input) {
				&::placeholder {
					@apply text-1rem;
				}
			}
			:deep(.arco-input-suffix) {
				width: 2.5rem;
				height: 2.5rem;
				.inner-icon {
					@apply flex-center inline-block rounded-1/2 relative flex-shrink-0;
					width: 2rem;
					height: 2rem;
					&::after {
						content: "";
						width: 1px;
						height: 1rem;
						@apply absolute left-10 z-10 bg-[#999];
					}
					&:hover {
						@apply bg-opacity-50 bg-gray-200;
						cursor: pointer;
					}
				}
			}
		}

		.content-modal {
			//rounded-32px
			@apply fixed top-0 left-0 w-full px-6  h-0 bg-white  overflow-hidden flex flex-col;
			transition: all 0.2s ease-in;
			animation: 0.2s ease-in;
			.modal-header {
				@apply w-full flex items-center justify-between text-2 py-4;
				&_title {
					@apply font-700 flex-1;
					font-size: 1.25rem;
				}
				&_close {
					cursor: pointer;
				}
			}
			.modal-body {
				@apply h-full flex-1 overflow-auto;
				.arco-form-item {
					@apply mb-0;
					:deep(.arco-form-item-wrapper-col) {
						@apply h-full;
						.arco-form-item-content-wrapper {
							@apply h-full;
							.arco-form-item-content {
								@apply h-full;
							}
						}
					}
				}
			}
			.modal-footer {
				@apply flex justify-end gap-x-4  py-4;
			}
		}
		.open {
			@apply w-full h-252px  z-100;
			//rounded-32px
		}
	}
}
</style>
